<template>
	<div class="data-table-container">
		<div class="table-header">
			<a-button :icon="h(PlusOutlined)" type="primary" @click="addNewRow"> 新增数据项</a-button>
		</div>
		<a-table
			:columns="tableColumns"
			:dataSource="modelValue"
			:pagination="false"
			:scroll="{ x: 800 }"
			bordered
			size="small"
		>
			<template #bodyCell="{ column, record, index }">
				<template v-if="column.dataIndex === 'title'">
					<a-input v-model:value="record.title" placeholder="请输入标题" size="small" @change="handleUpdate" />
				</template>
				<template v-if="column.dataIndex === 'numValue'">
					<a-input-number
						v-model:value="record.numValue"
						placeholder="请输入数值"
						size="small"
						style="width: 100%"
						@change="handleUpdate"
					/>
				</template>
				<template v-if="column.dataIndex === 'link'">
					<a-input v-model:value="record.link" placeholder="请输入链接" size="small" @change="handleUpdate" />
				</template>
				<template v-if="column.dataIndex === 'iconKey'">
					<div class="icon-selector-wrapper">
						<a-input
							v-model:value="record.iconKey"
							placeholder="请选择图标"
							readonly
							size="small"
							style="width: calc(100% - 32px)"
							@change="handleUpdate"
						/>
						<a-button
							:icon="h(AppstoreOutlined)"
							class="icon-select-btn"
							size="small"
							@click="openIconSelector(record)"
						>
						</a-button>
					</div>
				</template>
				<template v-if="column.dataIndex === 'iconColor'">
					<div class="color-input-wrapper">
						<a-input
							v-model:value="record.iconColor"
							placeholder="请输入图标颜色"
							size="small"
							style="width: calc(100% - 32px)"
							@change="(e) => updateColor(record, 'iconColor', e.target.value)"
						/>
						<input
							:value="record.iconColor || '#000000'"
							class="color-picker"
							type="color"
							@input="(e) => updateColor(record, 'iconColor', e.target.value)"
						/>
					</div>
				</template>
				<template v-if="column.dataIndex === 'iconBgColor'">
					<div class="color-input-wrapper">
						<a-input
							v-model:value="record.iconBgColor"
							placeholder="请输入背景颜色"
							size="small"
							style="width: calc(100% - 32px)"
							@change="(e) => updateColor(record, 'iconBgColor', e.target.value)"
						/>
						<input
							:value="record.iconBgColor || '#000000'"
							class="color-picker"
							type="color"
							@input="(e) => updateColor(record, 'iconBgColor', e.target.value)"
						/>
					</div>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<div class="action-buttons">
						<a-button
							:disabled="index === 0"
							:icon="h(UpOutlined)"
							size="small"
							title="向上移动"
							type="link"
							@click="moveUp(index)"
						/>
						<a-button
							:disabled="index === modelValue.length - 1"
							:icon="h(DownOutlined)"
							size="small"
							title="向下移动"
							type="link"
							@click="moveDown(index)"
						/>
						<a-popconfirm cancel-text="取消" ok-text="确定" title="确定要删除这条数据吗？" @confirm="deleteRow(index)">
							<a-button :icon="h(DeleteOutlined)" danger size="small" title="删除" type="link" />
						</a-popconfirm>
					</div>
				</template>
			</template>
		</a-table>

		<!-- 图标选择器 -->
		<IconSelector ref="iconSelectorRef" @iconCallBack="iconCallBack" />
	</div>
</template>

<script setup>
	import { h, ref } from 'vue'
	import { AppstoreOutlined, DeleteOutlined, DownOutlined, PlusOutlined, UpOutlined } from '@ant-design/icons-vue'
	import IconSelector from '@/components/Selector/iconSelector.vue'

	const props = defineProps({
		modelValue: {
			type: Array,
			default: () => []
		}
	})

	const emit = defineEmits(['update:modelValue', 'update'])

	// 图标选择器引用
	const iconSelectorRef = ref()
	const currentEditingRecord = ref(null)

	// 表格列定义
	const tableColumns = [
		{
			title: '标题',
			dataIndex: 'title',
			width: 120,
			ellipsis: true
		},
		{
			title: '数值',
			dataIndex: 'numValue',
			width: 100
		},
		{
			title: '链接',
			dataIndex: 'link',
			width: 150,
			ellipsis: true
		},
		{
			title: '图标',
			dataIndex: 'iconKey',
			width: 120
		},
		{
			title: '图标颜色',
			dataIndex: 'iconColor',
			width: 120
		},
		{
			title: '背景颜色',
			dataIndex: 'iconBgColor',
			width: 120
		},
		{
			title: '操作',
			dataIndex: 'action',
			width: 120,
			fixed: 'right'
		}
	]

	// 新增行
	const addNewRow = () => {
		const newItem = {
			title: '',
			numValue: 0,
			link: '',
			iconKey: 'home-outlined',
			iconColor: '#000000',
			iconBgColor: '#90caf8'
		}
		const newData = [...props.modelValue, newItem]
		emit('update:modelValue', newData)
		handleUpdate()
	}

	// 删除行
	const deleteRow = (index) => {
		const newData = [...props.modelValue]
		newData.splice(index, 1)
		emit('update:modelValue', newData)
		handleUpdate()
	}

	// 向上移动
	const moveUp = (index) => {
		if (index > 0) {
			const newData = [...props.modelValue]
			// 交换当前行和上一行的位置
			;[newData[index], newData[index - 1]] = [newData[index - 1], newData[index]]
			emit('update:modelValue', newData)
			handleUpdate()
		}
	}

	// 向下移动
	const moveDown = (index) => {
		if (index < props.modelValue.length - 1) {
			const newData = [...props.modelValue]
			// 交换当前行和下一行的位置
			;[newData[index], newData[index + 1]] = [newData[index + 1], newData[index]]
			emit('update:modelValue', newData)
			handleUpdate()
		}
	}

	// 打开图标选择器
	const openIconSelector = (record) => {
		currentEditingRecord.value = record
		iconSelectorRef.value.showIconModal(record.iconKey)
	}

	// 图标选择回调
	const iconCallBack = (iconValue) => {
		if (currentEditingRecord.value) {
			currentEditingRecord.value.iconKey = iconValue
			handleUpdate()
		}
	}

	// 更新颜色
	const updateColor = (record, field, value) => {
		// 确保颜色值格式为十六进制
		const colorValue = value.startsWith('#') ? value : `#${value}`
		record[field] = colorValue
		handleUpdate()
	}

	// 处理更新
	const handleUpdate = () => {
		emit('update')
	}
</script>

<style scoped>
	.data-table-container {
		border: 1px solid #d9d9d9;
		border-radius: 2px;
		overflow: hidden;
	}

	.table-header {
		padding: 12px 16px;
		background-color: #fafafa;
		border-bottom: 1px solid #d9d9d9;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.color-input-wrapper {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.icon-selector-wrapper {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.icon-select-btn {
		width: 24px;
		height: 24px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.color-picker {
		width: 24px;
		height: 24px;
		border: 1px solid #d9d9d9;
		border-radius: 2px;
		cursor: pointer;
		padding: 0;
		background: none;
	}

	.color-picker::-webkit-color-swatch-wrapper {
		padding: 0;
	}

	.color-picker::-webkit-color-swatch {
		border: none;
		border-radius: 2px;
	}

	:deep(.ant-table-tbody > tr > td) {
		padding: 8px !important;
	}

	:deep(.ant-table-thead > tr > th) {
		padding: 12px 8px !important;
		font-weight: 600;
	}

	:deep(.ant-input-number) {
		width: 100%;
	}

	:deep(.ant-btn-link) {
		padding: 0 4px;
		height: auto;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: 4px;
		justify-content: center;
	}

	.action-buttons .ant-btn {
		min-width: 24px;
		padding: 0 4px;
	}

	.action-buttons .ant-btn:disabled {
		opacity: 0.3;
	}
</style>
